<template>
	<view class="my-insurance">
		<view class="reminder">
			<view class="reminder-title">
				温馨提示
			</view>
			<view class="reminder-content">
				<view v-for="item in reminder" :key="item.value">
					{{item.label}}
				</view>
				<view style="color: #ff00009e;">
					医保认证只是当时认证时医保局确认此认证有效，可享受挂号医保减免优惠，实际挂号时能否获得减免优惠，还需医保局确认当前时间段能否进行减免哦。
				</view>
			</view>
		</view>
		<view class="my-insurance-main" v-if="!binded">
			<u-field label='姓名:' label-width='150' label-align='right' :border-bottom='false' v-model="formInfo.name" placeholder="请输入姓名" trim/>
			<u-field label='身份证号:' label-width='150' label-align='right' :border-bottom='false' v-model="formInfo.identityCard" placeholder="请输入身份证号" trim maxlength='18'/>
			<u-field label='银行卡:' label-width='150' label-align='right' :border-bottom='false' v-model="formInfo.cardNo" placeholder="请输入医保卡后6位" trim maxlength='6'/>
			<u-field label='手机号:' label-width='150' label-align='right' :border-bottom='false' v-model="formInfo.phone" placeholder="请输入手机号" trim maxlength='11'/>
			<view style="height: 90rpx;padding: 0 20rpx; margin-top: 50rpx;">
				<view class="theme-light-btn" @click="onSubmit">医保认证</view>
			</view>
		</view>
		<view class="my-insurance-main" v-else>
			<view class="card-row"> <label>姓名：</label>{{formInfo.name}}</view>
			<view class="card-row"> <label>身份证号：</label>{{formInfo.identityCard}}</view>
			<view class="card-row"> <label>银行卡：</label>{{formInfo.cardNo}}</view>
			<view class="card-row"> <label>手机号：</label>{{formInfo.phone}}</view>
			<view style="height: 90rpx;padding: 0 20rpx; margin-top: 50rpx;">
				<view class="theme-light-btn" @click="onCanle">解绑医保认证</view>
			</view>
		</view>
		<Load :load="load" />
	</view>
</template>

<script>
	import Load from '@/components/Load/index.vue'
	import { getInsuranceInfo, poInsurance, deInsurance } from '@/api/otherService.js'
	import { mapGetters } from 'vuex'
	export default {
		components:{ Load },
		data() {
			return {
				reminderList:[
					{
						label:'1.银行卡为医保卡上的银行卡后6位。',
						value:'label1'
					},
					{
						label:'2.手机号为缴纳医保时存留的手机号码。',
						value:'label2'
					},
					{
						label:'3.以上信息必须和医保卡上信息相符，方可认证成功。',
						value:'label3'
					},
					{
						label:' 4.医保认证只限于本地参保用户，医保认证成功后，是否可享受挂号医保减免优惠，需要医保局确认当前时间段能否进行减免。',
						value:'label4'
					},
				],
				formInfo:{
					name:'',identityCard:''
				},
				binded:false,
				load:true
			}
		},
		computed:{
			reminder(){
				if(!this.binded){
					return this.reminderList
				}else{
					return []
				}
			},
			...mapGetters(['userInfo'])
		},
		async onLoad(){
			await this.$onLaunched
			this.initData()
		},
		methods: {
			initData(){
				if(!this.userInfo.patId){
					uni.navigateTo({
						// url:'/pages/Login/index'
						url:'/pages/Login/addPatient'
					})
					return
				}
				this.load = true
				getInsuranceInfo({patientId: this.userInfo.patId}).then(data => {
					this.load = false
					if(data){
						this.formInfo = data
						this.binded = true
					}else{
						this.binded = false
						this.formInfo = {
							name:this.userInfo.name||'',
							identityCard:this.userInfo.idCard||'',
							cardNo:'',
							phone:this.userInfo.phoneNumber||''
						}
					}
				}).catch(e => {
					this.load = false
					this.formInfo = {
						name:this.userInfo.name||'',
						identityCard:this.userInfo.idCard||'',
						cardNo:'',
						phone:this.userInfo.phoneNumber||''
					}
				})
			},
			onSubmit(){
				let flag = false
				for (let key in this.formInfo) {
					if(!this.formInfo[key]){
						flag = true
						break
					}
				}
				if(flag){
					this.$u.toast('请完善医保认证信息')
					return
				}
				this.load = true
				poInsurance(this.formInfo).then(data => {
					this.load = false
					this.$u.toast('医保认证成功')
					this.initData()
				}).catch(e => {
					this.load = false
				})
			},
			onCanle(){
				this.load = true
				let params = {
					...this.formInfo
				}
				deInsurance(params).then(data => {
					this.load = false
					this.$u.toast('医保取消认证成功')
				}).catch(e => {
					this.load = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-insurance{
		background-color: #FFFFFF;
		height: calc(100vh);
		overflow: scroll;
		&-main{
			padding: 0 30rpx;
		}
	}
</style>
<style lang="scss">
	.my-insurance{
		.u-field{
			height: 70rpx;
			padding-top: 0;
			padding-bottom: 0;
			line-height: 70rpx;
			margin-bottom: 40rpx;
			>view{
				height: 100%;
			}
			.u-label{
				color: $text-color-grey;
			}
			.fild-body{
				border: 1px solid $border-color;
				border-radius: 30px;
				padding: 4rpx;
				margin-left: 4px;
				input{
					padding: 0;
				}
			}
		}
		
	}
</style>